<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="page_right">
    <div class="account_query" style="padding-top:0;">
        <div id="search_view">
            <dl>
                <dt>场地名：</dt>
                <dd>
                    <select id="placeId">
                        <option value="0" selected="selected">全部场地</option>
                        <c:forEach items="${placeList}" var="place">
                            <option value="${place.placeid}">${place.address}</option>
                        </c:forEach>
                    </select>
                </dd>
                <dt>设备简码：</dt>
                <dd><input type="text" id="shortCode"></dd>
            </dl>

            <dl>
                <dt>设备名：</dt>
                <dd>
                    <select id="deviceId">
                        <option value="0">全部设备</option>
                        <c:forEach items="${deviceList}" var="device">
                            <option value="${device.deviceId}" >${device.address} - ${device.deviceName}</option>
                        </c:forEach>
                    </select>
                </dd>
                <dt>IMEI/MAC码：</dt>
                <dd><input type="text" id="imme"></dd>
            </dl>
            <div class="account_query_buttondv" style="height:80px;">
                <a href="javascript:;" id="search_data">查询</a>
            </div>
        </div>

        <div id="_data" style="background: #EEE;"></div>

    </div>
</div>

<script type="application/javascript">
    $("#placeId").change(function(){
        $.ajax({
            url:'${basePath}v2/device/searchPlaceDevice',
            type : 'POST',
            data : {'placeId':$("#placeId").val()},
            success: function (ret) {
                $("#deviceId option").remove();
                if(ret.result) {
                    if(ret.data.length>0){
                        $("#deviceId").append('<option value="0" selected="selected">全部设备</option>');
                        $.each(ret.data,function(n,value) {
                            $("#deviceId").append('<option value="'+value.deviceId+'">'+value.deviceName+'</option>');
                        });
                    }else{
                        $("#deviceId").append('<option value="0" selected="selected">全部设备</option>');
                    }
                }else{
                    alert(ret.info);
                }
            }
        });
    });

    $("#search_data").click(function () {
        $("#_data").html("");

        var placeId = $("#placeId").val();
        var deviceId = $("#deviceId").val();
        var shortCode = $("#shortCode").val();
        var imme = $("#imme").val();
        $.ajax({
            url:'${basePath}v2/device/searchDevice',
            type : 'POST',
            data : {'placeId':placeId,"deviceId":deviceId,"deviceshortcode":shortCode,"imme":imme},
            success: function (ret) {
                if(ret.result) {

                    $.each(ret.data,function(n,value) {
                        getDeviceList(value);
                    });
                    //场地设备列表样式控制
                    $(".place_listdv").hide();
                    $(".place_list li>a").on("click", function(){
                        if($(this).next("div").is(":hidden")){
                            $(this).next("div").stop().slideDown();
                            $(this).addClass("cur");
                        }else{
                            $(this).next("div").stop().slideUp();
                            $(this).removeClass("cur");
                        }
                    });
                }else{
                    alert(ret.info);
                }
            }
        });
    });

    /**
     * 循环场地设备
     * @param n
     */
    function getDeviceList(n){
        var value1="<div style='margin-bottom:10px;' class='dv1'><p class='place_query_placename'>"+n.placeDto.address+"</p><ul class='place_list'>";
        var value2="<li><a href='javascript:;'>兑币机<span class='equipment_statenumb'>数量："+n.currencyList.length+"台</span></a><div class='place_listdv'>";
        var value3="<li><a href='javascript:;'>娃娃机<span class='equipment_statenumb'>数量："+n.dollList.length+"台</span></a><div class='place_listdv'>";
        var value4="<li><a href='javascript:;'>礼品机<span class='equipment_statenumb'>数量："+n.giftList.length+"台</span></a><div class='place_listdv'>";

        var value8="";
        var value5="";
        var value6="";
        var value7="";

        for(var j=0; j<n.currencyList.length; j++){
            value5+="<p><span>"+n.currencyList[j].deviceName+"&nbsp;&nbsp;"+n.currencyList[j].deviceShortCode+"</span><a href='${basePath}v2/device/"+n.currencyList[j].placeId+"/showView/"+n.currencyList[j].stateName+"/"+n.currencyList[j].deviceId+"/deviceView'>编辑</a></p>";
        }

        for(var j=0; j<n.dollList.length; j++){
            value6+="<p><span>"+n.dollList[j].deviceName+"&nbsp;&nbsp;"+n.dollList[j].deviceShortCode+"</span><a href='${basePath}v2/device/"+n.dollList[j].placeId+"/showView/"+n.dollList[j].stateName+"/"+n.dollList[j].deviceId+"/deviceView'>编辑</a></p>";
        }

        for(var j=0; j<n.giftList.length; j++){
            value7+="<p><span>"+n.giftList[j].deviceName+"&nbsp;&nbsp;"+n.giftList[j].deviceShortCode+"</span><a href='${basePath}v2/device/"+n.giftList[j].placeId+"/showView/"+n.giftList[j].stateName+"/"+n.giftList[j].deviceId+"/deviceView'>编辑</a></p>";
        }

        value2+=value5;
        value2+="</div></li>";
        value3+=value6;
        value3+="</div></li>";
        value4+=value7;
        value4+="</div></li>";
        value8=(value2+value3+value4)+"</ul></div>";
        value1+=value8;
        $("#_data").append(value1);
    }

</script>
